<template>
	<div class="loading" v-show="_loading">
		<svg class="circular" viewBox="0 0 50 50">
			<circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
		</svg>
		&nbsp;
		<span>{{ _title }}...</span>&nbsp;
		<span style="color: #4aa4f7"> {{ _msg    }}</span>
		<slot></slot>
	</div>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		nextTick,
		computed,
		reactive,
		watch,
		ref,
		toRefs
	} from "vue";

	//事件抛出
	//外层绑定@onFn="hOnFn"
	const emit = defineEmits(['onFn', 'onUnSave']);
	//触发
	const hOnFn = (t) => {
		emit('onFn', t);
	}
	const _loading = ref(false),
		_msg = ref(""),
		_title = ref("稍候");

	const hEvent = {
		setVisible: ({
			visible,
			title,
			msg
		}) => {
			_loading.value = visible;
			_msg.value = msg;
			_title.value = title
		}
	}
	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		hEvent
	});


	//属性定义
	//数据绑定v-bind:dat="dat"  
	//const dat=ref({});
	const props = defineProps({
		dat: {
			type: Object
		}, //概况
	});
</script>

<style scoped lang="scss">
	.loading {
		position: absolute;
		height: 60px;
		background: rgba(0, 0, 0, 0.65);
		top: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		color: #eee;
		align-items: center;
		justify-content: center;
	}
</style>